<!DOCTYPE html>
<html lang="en">
	{% load static%}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实时监测</title>
   <link rel="stylesheet" href="/media/css/bootstrap-off-canvas-nav.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-off-canvas-nav.js"></script>
    <link href="/media/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/static/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
 <link rel="stylesheet" href="/media/video/style1.css">
  <link rel="stylesheet" href="/media/video/style.css">
   <link rel="stylesheet" href="/media/video/style2.css">
<link rel="stylesheet" href="/media/back/back.css">
     <style>
        .font-type {
            color: white;
        }

        .position1 {
            position: relative;
            float: left;
            width: 20%;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

        body {
            position: relative;
            overflow-x: hidden;
        }

        body,
        html {
            height: 100%;
            background-color: white;
        }

        .nav .open>a {
            background-color: transparent;
        }

        .nav .open>a:hover {
            background-color: transparent;
        }

        .nav .open>a:focus {
            background-color: transparent;
        }

        /*-------------------------------*/
        /*           Wrappers            */
        /*-------------------------------*/
        #wrapper {
            height: 0px;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            padding-left: 0;
            transition: all 0.5s ease;
        }

        #wrapper.toggled {
            padding-left: 220px;
        }

        #wrapper.toggled #sidebar-wrapper {
            width: 220px;
        }

        #wrapper.toggled #page-content-wrapper {
            margin-right: -220px;
            position: absolute;
        }

        #sidebar-wrapper {
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
            background: #1a1a1a;
            height: 100%;
            left: 220px;
            margin-left: -220px;
            overflow-x: hidden;
            overflow-y: auto;
            transition: all 0.5s ease;
            width: 0;
            z-index: 1000;
        }

        #sidebar-wrapper::-webkit-scrollbar {
            display: none;
        }

        #page-content-wrapper {
            padding-top: 70px;
            width: 100%;
        }



        /*-------------------------------*/
        /*       Hamburger-Cross         */
        /*-------------------------------*/
        .hamburger {
            background: black;
            border: none;
            display: block;
            height: 32px;
            margin-left: 15px;
            position: fixed;
            top: 20px;
            width: 32px;
            z-index: 999;
        }

        .hamburger:hover {
            outline: none;
        }

        .hamburger:focus {
            outline: none;
        }

        .hamburger:active {
            outline: none;
        }

        .hamburger.is-closed:before {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            color: #ffffff;
            content: '';
            display: block;
            font-size: 14px;
            line-height: 32px;
            opacity: 0;
            text-align: center;
            width: 100px;
        }

        .hamburger.is-closed:hover before {
            -webkit-transform: translate3d(-100px, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            display: block;
            opacity: 1;
        }

        .hamburger.is-closed:hover .hamb-top {
            -webkit-transition: all 0.35s ease-in-out;
            top: 0;
        }

        .hamburger.is-closed:hover .hamb-bottom {
            -webkit-transition: all 0.35s ease-in-out;
            bottom: 0;
        }

        .hamburger.is-closed .hamb-top {
            -webkit-transition: all 0.35s ease-in-out;
            background-color: rgba(255, 255, 255, 0.7);
            top: 5px;
        }

        .hamburger.is-closed .hamb-middle {
            background-color: rgba(255, 255, 255, 0.7);
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-closed .hamb-bottom {
            -webkit-transition: all 0.35s ease-in-out;
            background-color: rgba(255, 255, 255, 0.7);
            bottom: 5px;
        }

        .hamburger.is-closed .hamb-top,
        .hamburger.is-closed .hamb-middle,
        .hamburger.is-closed .hamb-bottom,
        .hamburger.is-open .hamb-top,
        .hamburger.is-open .hamb-middle,
        .hamburger.is-open .hamb-bottom {
            height: 4px;
            left: 0;
            position: absolute;
            width: 100%;
        }

        .hamburger.is-open .hamb-top {
            -webkit-transform: rotate(45deg);
            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
            background-color: #ffffff;
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-open .hamb-middle {
            background-color: #ffffff;
            display: none;
        }

        .hamburger.is-open .hamb-bottom {
            -webkit-transform: rotate(-45deg);
            -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
            background-color: #ffffff;
            margin-top: -2px;
            top: 50%;
        }

        .hamburger.is-open:before {
            -webkit-transform: translate3d(0, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            color: #ffffff;
            content: '';
            display: block;
            font-size: 14px;
            line-height: 32px;
            opacity: 0;
            text-align: center;
            width: 100px;
        }

        .hamburger.is-open:hover before {
            -webkit-transform: translate3d(-100px, 0, 0);
            -webkit-transition: all 0.35s ease-in-out;
            display: block;
            opacity: 1;
        }

        /*-------------------------------*/
        /*          Dark Overlay         */
        /*-------------------------------*/
        .overlay {
            position: fixed;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        .top_div {
            background-color: rgba(0, 0, 0, 1);
            padding-top: 10px;
        }



        .dropdown-menu li {
            padding-left: 30px;
        }



        .dark-matter {

            /* margin-left: auto; */

            /* margin-right: auto; */

            /* max-width: 500px; */

            background: #555;

            /* padding: 20px 30px 20px 30px; */

            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

            color: #D3D3D3;

            text-shadow: 1px 1px 1px #444;

            /* border: none; */
            /* border-radius: 5px; */

            /* -webkit-border-radius: 5px; */

            /* -moz-border-radius: 5px; */

        }

        .dark-matter form {
            width: 100%;
        }

        .dark-matter h1 {

            padding: 0px 0px 10px 40px;

            display: block;

            border-bottom: 1px solid #444;

            margin: -10px -30px 30px -30px;

        }

        .dark-matter h1>span {

            display: block;

            font-size: 11px;

        }

        .dark-matter label {

            display: block;

            margin: 0px 0px 5px;

        }

        .dark-matter label>span {

            float: left;

            width: 20%;

            text-align: right;

            padding-right: 10px;

            margin-top: 10px;

            font-weight: bold;

        }

        .dark-matter input[type="text"],
        .dark-matter input[type="email"],
        .dark-matter textarea,
        .dark-matter select {

            border: none;

            color: #525252;

            height: 25px;

            line-height: 15px;

            margin-bottom: 16px;

            margin-right: 6px;

            margin-top: 2px;

            outline: 0 none;

            padding: 5px 0px 5px 5px;

            width: 70%;

            border-radius: 2px;

            -webkit-border-radius: 2px;

            -moz-border-radius: 2px;

            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

            background: #DFDFDF;

        }

        .dark-matter select {

            background: #DFDFDF url('/media/images/down2.png') no-repeat right;
            appearance: none;
            -webkit-appearance: none;

            -moz-appearance: none;

            text-indent: 0.01px;

            text-overflow: '';

            width: 70%;

            height: 35px;

            color: #525252;

            line-height: 25px;

        }

        .dark-matter textarea {

            height: 100px;

            padding: 5px 0px 0px 5px;

            width: 70%;

        }

        .dark-matter .button {
            margin: 10px 100px;
            background: #FFCC02;

            border: none;

            padding: 10px 70px 10px 70px;

            color: #585858;

            border-radius: 4px;

            -moz-border-radius: 4px;

            -webkit-border-radius: 4px;

            text-shadow: 1px 1px 1px #FFE477;

            font-weight: bold;

            box-shadow: 1px 1px 1px #3D3D3D;

            -webkit-box-shadow: 1px 1px 1px #3D3D3D;

            -moz-box-shadow: 1px 1px 1px #3D3D3D;

        }

        .dark-matter .button:hover {
            color: #333;
            background-color: #EBEBEB;
        }


        #main {
            height: 90%;
            /* background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%); */
            overflow: hidden;
            position: relative;

            /*o background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%); */
            /* background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%); */
            /* background-image: linear-gradient(to right, #ebc0fd 0%, #d9ded8 100%); */
            /* background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);  */
            /* background-image: linear-gradient(to right, #ebbba7 0%, #cfc7f8 100%);  */
            /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.40) 0%, rgba(0, 0, 0, 0.40) 120%) #989898;
            background-blend-mode: multiply, multiply; */
            /* background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); */
            background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
            /* background-image: linear-gradient(to right, #a8caba 0%, #5d4157 100%); */
            /* background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%); */
            /* background-image: linear-gradient(to right, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%); */
            /* background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%); */
        }

        .vedioDiv {
            position: absolute;
            top: 40px;
            left: 250px;


            width: 1000px;
            height: 600px;
            background-color: rgba(0, 0, 0, .3);
        }


        .vedioDiv::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 10px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        .vedioDiv::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
            background: #535353;
        }

        .vedioDiv::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            /* background: #EDEDED; */
            background: rgba(0, 0, 0, 0.05);
        }


        #wrap1,
        #wrap2,
        #wrap3,
        #wrap4 {
            width: 90%;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #ccc;
            position: relative;
            /* background: url(123.jpg) no-repeat center/100% 100%; */
        }

        .resizeBox {
            width: 100px;
            height: 100px;
            min-width: 100px;
            min-height: 40px;
            position: absolute;
            left: 0px;
            top: 0px;
            border: 1px dashed #ccc;
            cursor: move;
            user-select: none;
        }

        .resizeContent {
            width: 100%;
            height: 100%;
        }

        .dragBlock {
            width: 6px;
            height: 6px;
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid #000;
            background: #fff;
            cursor: e-resize;
        }

        .dragBlock.upDragBlock {
            left: 50%;
            margin-left: -2.5px;
            margin-top: -3px;
            cursor: n-resize;
        }

        .dragBlock.downDragBlock {
            left: 50%;
            top: 100%;
            margin-left: -2.5px;
            margin-top: -2px;
            cursor: s-resize;
        }

        .dragBlock.leftDragBlock {
            top: 50%;
            margin-left: -3px;
            margin-top: -2.5px;
            cursor: w-resize;
        }

        .dragBlock.rightDragBlock {
            left: 100%;
            top: 50%;
            margin-left: -2px;
            margin-top: -2.5px;
            cursor: e-resize;
        }

        .dragBlock.leftUpDragBlock {
            margin-left: -3px;
            margin-top: -3px;
            cursor: nw-resize;
        }

        .dragBlock.leftDownDragBlock {
            top: 100%;
            margin-left: -3px;
            margin-top: -2px;
            cursor: sw-resize;
        }

        .dragBlock.rightUpDragBlock {
            left: 100%;
            margin-left: -2px;
            margin-top: -3px;
            cursor: ne-resize;
        }

        .dragBlock.rightDownDragBlock {
            left: 100%;
            top: 100%;
            margin-left: -2px;
            margin-top: -2px;
            cursor: se-resize;
        }

        .butDiv {
            text-align: center;
            margin-top: 10px;
        }

        .butt {
            padding: 5px 100px;
        }

        .titleDiv{
            padding :5px 50px;
            font-size: 20px;
            color: #fff;
        }

        #wrap1{
            background:url(/media/cameraArea/camera1.jpg) no-repeat;
            background-size:100% 100%;
        }
        #wrap2{
            background:url(/media/cameraArea/camera2.jpg) no-repeat;
            background-size:100% 100%;
        }
        #wrap3{
            background:url(/media/cameraArea/camera3.jpg) no-repeat;
            background-size:100% 100%;
        }
        #wrap4{
            background:url(/media/cameraArea/camera4.jpg) no-repeat;
            background-size:100% 100%;
        }



    </style>
   <style>
          .font-type {
              color: white;
          }

          .position1 {
              position: relative;
              float: left;
              width: 20%;
              height: 50px;
              text-align: center;
              line-height: 50px;
          }

          @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

          body {
              position: relative;
              overflow-x: hidden;
          }

          body,
          html {
              height: 100%;
              background-color: white;
          }

          .nav .open>a {
              background-color: transparent;
          }

          .nav .open>a:hover {
              background-color: transparent;
          }

          .nav .open>a:focus {
              background-color: transparent;
          }

          /*-------------------------------*/
          /*           Wrappers            */
          /*-------------------------------*/
          #wrapper {
              height: 0px;
              -moz-transition: all 0.5s ease;
              -o-transition: all 0.5s ease;
              -webkit-transition: all 0.5s ease;
              padding-left: 0;
              transition: all 0.5s ease;
          }

          #wrapper.toggled {
              padding-left: 220px;
          }

          #wrapper.toggled #sidebar-wrapper {
              width: 220px;
          }

          #wrapper.toggled #page-content-wrapper {
              margin-right: -220px;
              position: absolute;
          }

          #sidebar-wrapper {
              -moz-transition: all 0.5s ease;
              -o-transition: all 0.5s ease;
              -webkit-transition: all 0.5s ease;
              background: #1a1a1a;
              height: 100%;
              left: 220px;
              margin-left: -220px;
              overflow-x: hidden;
              overflow-y: auto;
              transition: all 0.5s ease;
              width: 0;
              z-index: 1000;
          }

          #sidebar-wrapper::-webkit-scrollbar {
              display: none;
          }

          #page-content-wrapper {
              padding-top: 70px;
              width: 100%;
          }



          /*-------------------------------*/
          /*       Hamburger-Cross         */
          /*-------------------------------*/
          .hamburger {
              background: black;
              border: none;
              display: block;
              height: 32px;
              margin-left: 15px;
              position: fixed;
              top: 20px;
              width: 32px;
              z-index: 999;
          }

          .hamburger:hover {
              outline: none;
          }

          .hamburger:focus {
              outline: none;
          }

          .hamburger:active {
              outline: none;
          }

          .hamburger.is-closed:before {
              -webkit-transform: translate3d(0, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              color: #ffffff;
              content: '';
              display: block;
              font-size: 14px;
              line-height: 32px;
              opacity: 0;
              text-align: center;
              width: 100px;
          }

          .hamburger.is-closed:hover before {
              -webkit-transform: translate3d(-100px, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              display: block;
              opacity: 1;
          }

          .hamburger.is-closed:hover .hamb-top {
              -webkit-transition: all 0.35s ease-in-out;
              top: 0;
          }

          .hamburger.is-closed:hover .hamb-bottom {
              -webkit-transition: all 0.35s ease-in-out;
              bottom: 0;
          }

          .hamburger.is-closed .hamb-top {
              -webkit-transition: all 0.35s ease-in-out;
              background-color: rgba(255, 255, 255, 0.7);
              top: 5px;
          }

          .hamburger.is-closed .hamb-middle {
              background-color: rgba(255, 255, 255, 0.7);
              margin-top: -2px;
              top: 50%;
          }

          .hamburger.is-closed .hamb-bottom {
              -webkit-transition: all 0.35s ease-in-out;
              background-color: rgba(255, 255, 255, 0.7);
              bottom: 5px;
          }

          .hamburger.is-closed .hamb-top,
          .hamburger.is-closed .hamb-middle,
          .hamburger.is-closed .hamb-bottom,
          .hamburger.is-open .hamb-top,
          .hamburger.is-open .hamb-middle,
          .hamburger.is-open .hamb-bottom {
              height: 4px;
              left: 0;
              position: absolute;
              width: 100%;
          }

          .hamburger.is-open .hamb-top {
              -webkit-transform: rotate(45deg);
              -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
              background-color: #ffffff;
              margin-top: -2px;
              top: 50%;
          }

          .hamburger.is-open .hamb-middle {
              background-color: #ffffff;
              display: none;
          }

          .hamburger.is-open .hamb-bottom {
              -webkit-transform: rotate(-45deg);
              -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
              background-color: #ffffff;
              margin-top: -2px;
              top: 50%;
          }

          .hamburger.is-open:before {
              -webkit-transform: translate3d(0, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              color: #ffffff;
              content: '';
              display: block;
              font-size: 14px;
              line-height: 32px;
              opacity: 0;
              text-align: center;
              width: 100px;
          }

          .hamburger.is-open:hover before {
              -webkit-transform: translate3d(-100px, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              display: block;
              opacity: 1;
          }

          /*-------------------------------*/
          /*          Dark Overlay         */
          /*-------------------------------*/
          .overlay {
              position: fixed;
              display: none;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.4);
              z-index: 1;
          }

          .top_div {
              background-color: rgba(0, 0, 0, 1);
              padding-top: 10px;
          }


          #main {
              /* width: 1250px;
			  height: 600px; */
              overflow: hidden;
              position: relative;
          }


          #monitor_div {
              width: 78%;
              height: 630px;
              float: left;

          }

          #monitorControl1_div {
              margin-left: 10px;
              width: 21%;
              height: 600px;
              float: left;
              background-color: #27304c;
          }

          #record_div {
              width: 78%;
              height: 220px;
              float: left;
              background-color: #222943;
          }

          #monitorControl2_div {
              position: absolute;
              top: 550px;
              left: 78%;
              margin-left: 20px;
              width: 20%;
              height: 280px;
              float: left;
              background-color: #222943;

              box-shadow: -3px 3px 10px 10px rgba(0, 0, 0, 0.4);
              border-radius: 8px;

              padding: 10px;
          }

          .video_div {
              margin-top: -10px;
              padding-left: 50px;
              width: 90%;
              height: 300px;
          }

          .video_div video {
              margin-left: 50px;
          }

          #monitorcontrol_content_div {
              margin: 10px 10px;
              height: 500px;
              /* border: 1px ridge #222943; */
              box-shadow: -3px 3px 10px 10px rgba(0, 0, 0, 0.4);
              border-radius: 8px;
              background-color: #222943;
          }
          .monitorcon_content_div {
              margin: 10px 10px;
              box-shadow: -3px 3px 10px 10px rgba(0, 0, 0, 0.4);
              border-radius: 8px;
              background-color: #222943;
          }

          #monitorcontrol_content_top_div ,
          .monitorcontrol_content_top_div{

              height: 30px;
              background-color: #465483;
              text-align: center;
              font-size: 20px;
              color: #ffffff;
          }

          #monitorcontrol_content_div li {
              color: #ffffff;
              padding: 20px;
              cursor: pointer;
          }

          #monitorcontrol_content_div li:hover {
              color: #62b8f5;
              /* background-color: #402d5c; */
          }

          /* #monitorcontrol_content_div li:focus{
              background-color: #402d5c;
                outline-style: none;

          } */


          .query_button {
              margin-left: 50px;
              padding: 5px 80px;
              font-size: 20px;
              /* height: 50px; */
              border-radius: 50px;
              cursor: pointer;
              border: none;
              outline: none;
          }

          .query_button:hover {
              background-color: #ec971f;
          }

          .panel1_div {
              margin: 20px 10px;
          }


          #record_div .panel-heading {
              background-color: #465483;
          }

          #record_div td {
              color: #ffffff;
          }

          .dropdown-menu li {
              padding-left: 30px;
          }



          .dark-matter {

              /* margin-left: auto; */

              /* margin-right: auto; */

              /* max-width: 500px; */

              background: #555;

              /* padding: 20px 30px 20px 30px; */

              font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

              color: #D3D3D3;

              text-shadow: 1px 1px 1px #444;

              /* border: none; */
              /* border-radius: 5px; */

              /* -webkit-border-radius: 5px; */

              /* -moz-border-radius: 5px; */

          }

          .dark-matter form {
              width: 100%;
          }

          .dark-matter h1 {

              padding: 0px 0px 10px 40px;

              display: block;

              border-bottom: 1px solid #444;

              margin: -10px -30px 30px -30px;

          }

          .dark-matter h1>span {

              display: block;

              font-size: 11px;

          }

          .dark-matter label {

              display: block;

              margin: 0px 0px 5px;

          }

          .dark-matter label>span {

              float: left;

              width: 20%;

              text-align: right;

              padding-right: 10px;

              margin-top: 10px;

              font-weight: bold;

          }

          .dark-matter input[type="text"],
          .dark-matter input[type="email"],
          .dark-matter textarea,
          .dark-matter select {

              border: none;

              color: #525252;

              height: 25px;

              line-height: 15px;

              margin-bottom: 16px;

              margin-right: 6px;

              margin-top: 2px;

              outline: 0 none;

              padding: 5px 0px 5px 5px;

              width: 70%;

              border-radius: 2px;

              -webkit-border-radius: 2px;

              -moz-border-radius: 2px;

              -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

              background: #DFDFDF;

          }

          .dark-matter select {

              background: #DFDFDF url('/media/images/down2.png') no-repeat right;


              appearance: none;

              -webkit-appearance: none;

              -moz-appearance: none;

              text-indent: 0.01px;

              text-overflow: '';

              width: 70%;

              height: 35px;

              color: #525252;

              line-height: 25px;

          }

          .dark-matter textarea {

              height: 100px;

              padding: 5px 0px 0px 5px;

              width: 70%;

          }

          .dark-matter .button {
              margin: 10px 100px;
              background: #FFCC02;

              border: none;

              padding: 10px 70px 10px 70px;

              color: #585858;

              border-radius: 4px;

              -moz-border-radius: 4px;

              -webkit-border-radius: 4px;

              text-shadow: 1px 1px 1px #FFE477;

              font-weight: bold;

              box-shadow: 1px 1px 1px #3D3D3D;

              -webkit-box-shadow: 1px 1px 1px #3D3D3D;

              -moz-box-shadow: 1px 1px 1px #3D3D3D;

          }

          .dark-matter .button:hover {

              color: #333;

              background-color: #EBEBEB;

          }

          #photoDiv{
              overflow:auto;
          }

          .table-div{
              overflow:auto;
              height:170px;
          }

           .table-div::-webkit-scrollbar{
              /*滚动条整体样式*/
              width: 10px;
              /*高宽分别对应横竖滚动条的尺寸*/
              height: 1px;
           }

           .table-div::-webkit-scrollbar-thumb{
               /*滚动条里面小方块*/
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
              background: #535353;
           }

           .table-div::-webkit-scrollbar-track{
               /*滚动条里面轨道*/
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              /* background: #EDEDED; */
              background: rgba(0, 0, 0, 0.05);
           }
           .test{
               padding-bottom: 45%;
           }
      </style>

      <style>
          .font-type {
              color: white;
          }

          .position1 {
              position: relative;
              float: left;
              width: 20%;
              height: 50px;
              text-align: center;
              line-height: 50px;
          }

          @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

          body {
              position: relative;
              overflow-x: hidden;
          }

          body,
          html {
              height: 100%;
              background-color: white;
          }

          .nav .open>a {
              background-color: transparent;
          }

          .nav .open>a:hover {
              background-color: transparent;
          }

          .nav .open>a:focus {
              background-color: transparent;
          }

          /*-------------------------------*/
          /*           Wrappers            */
          /*-------------------------------*/
          #wrapper {
              height: 0px;
              -moz-transition: all 0.5s ease;
              -o-transition: all 0.5s ease;
              -webkit-transition: all 0.5s ease;
              padding-left: 0;
              transition: all 0.5s ease;
          }

          #wrapper.toggled {
              padding-left: 220px;
          }

          #wrapper.toggled #sidebar-wrapper {
              width: 220px;
          }

          #wrapper.toggled #page-content-wrapper {
              margin-right: -220px;
              position: absolute;
          }

          #sidebar-wrapper {
              -moz-transition: all 0.5s ease;
              -o-transition: all 0.5s ease;
              -webkit-transition: all 0.5s ease;
              background: #1a1a1a;
              height: 100%;
              left: 220px;
              margin-left: -220px;
              overflow-x: hidden;
              overflow-y: auto;
              transition: all 0.5s ease;
              width: 0;
              z-index: 1000;
          }

          #sidebar-wrapper::-webkit-scrollbar {
              display: none;
          }

          #page-content-wrapper {
              padding-top: 70px;
              width: 100%;
          }


          /*-------------------------------*/
          /*       Hamburger-Cross         */
          /*-------------------------------*/
          .hamburger {
              background: black;
              border: none;
              display: block;
              height: 32px;
              margin-left: 15px;
              position: fixed;
              top: 20px;
              width: 32px;
              z-index: 999;
          }

          .hamburger:hover {
              outline: none;
          }

          .hamburger:focus {
              outline: none;
          }

          .hamburger:active {
              outline: none;
          }

          .hamburger.is-closed:before {
              -webkit-transform: translate3d(0, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              color: #ffffff;
              content: '';
              display: block;
              font-size: 14px;
              line-height: 32px;
              opacity: 0;
              text-align: center;
              width: 100px;
          }

          .hamburger.is-closed:hover before {
              -webkit-transform: translate3d(-100px, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              display: block;
              opacity: 1;
          }

          .hamburger.is-closed:hover .hamb-top {
              -webkit-transition: all 0.35s ease-in-out;
              top: 0;
          }

          .hamburger.is-closed:hover .hamb-bottom {
              -webkit-transition: all 0.35s ease-in-out;
              bottom: 0;
          }

          .hamburger.is-closed .hamb-top {
              -webkit-transition: all 0.35s ease-in-out;
              background-color: rgba(255, 255, 255, 0.7);
              top: 5px;
          }

          .hamburger.is-closed .hamb-middle {
              background-color: rgba(255, 255, 255, 0.7);
              margin-top: -2px;
              top: 50%;
          }

          .hamburger.is-closed .hamb-bottom {
              -webkit-transition: all 0.35s ease-in-out;
              background-color: rgba(255, 255, 255, 0.7);
              bottom: 5px;
          }

          .hamburger.is-closed .hamb-top,
          .hamburger.is-closed .hamb-middle,
          .hamburger.is-closed .hamb-bottom,
          .hamburger.is-open .hamb-top,
          .hamburger.is-open .hamb-middle,
          .hamburger.is-open .hamb-bottom {
              height: 4px;
              left: 0;
              position: absolute;
              width: 100%;
          }

          .hamburger.is-open .hamb-top {
              -webkit-transform: rotate(45deg);
              -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
              background-color: #ffffff;
              margin-top: -2px;
              top: 50%;
          }

          .hamburger.is-open .hamb-middle {
              background-color: #ffffff;
              display: none;
          }

          .hamburger.is-open .hamb-bottom {
              -webkit-transform: rotate(-45deg);
              -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);
              background-color: #ffffff;
              margin-top: -2px;
              top: 50%;
          }

          .hamburger.is-open:before {
              -webkit-transform: translate3d(0, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              color: #ffffff;
              content: '';
              display: block;
              font-size: 14px;
              line-height: 32px;
              opacity: 0;
              text-align: center;
              width: 100px;
          }

          .hamburger.is-open:hover before {
              -webkit-transform: translate3d(-100px, 0, 0);
              -webkit-transition: all 0.35s ease-in-out;
              display: block;
              opacity: 1;
          }

          /*-------------------------------*/
          /*          Dark Overlay         */
          /*-------------------------------*/
          .overlay {
              position: fixed;
              display: none;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.4);
              z-index: 1;
          }

          .top_div {
              background-color: rgba(0, 0, 0, 1);
              padding-top: 10px;
          }



          .dropdown-menu li {
              padding-left: 30px;
          }



          .dark-matter {

              /* margin-left: auto; */

              /* margin-right: auto; */

              /* max-width: 500px; */

              background: #555;

              /* padding: 20px 30px 20px 30px; */

              font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

              color: #D3D3D3;

              text-shadow: 1px 1px 1px #444;

              /* border: none; */
              /* border-radius: 5px; */

              /* -webkit-border-radius: 5px; */

              /* -moz-border-radius: 5px; */

          }

          .dark-matter form {
              width: 100%;
          }

          .dark-matter h1 {

              padding: 0px 0px 10px 40px;

              display: block;

              border-bottom: 1px solid #444;

              margin: -10px -30px 30px -30px;

          }

          .dark-matter h1>span {

              display: block;

              font-size: 11px;

          }

          .dark-matter label {

              display: block;

              margin: 0px 0px 5px;

          }

          .dark-matter label>span {

              float: left;

              width: 20%;

              text-align: right;

              padding-right: 10px;

              margin-top: 10px;

              font-weight: bold;

          }

          .dark-matter input[type="text"],
          .dark-matter input[type="email"],
          .dark-matter textarea,
          .dark-matter select {

              border: none;

              color: #525252;

              height: 25px;

              line-height: 15px;

              margin-bottom: 16px;

              margin-right: 6px;

              margin-top: 2px;

              outline: 0 none;

              padding: 5px 0px 5px 5px;

              width: 70%;

              border-radius: 2px;

              -webkit-border-radius: 2px;

              -moz-border-radius: 2px;

              -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

              background: #DFDFDF;

          }

          .dark-matter select {

              background: #DFDFDF url('/media/images/down2.png') no-repeat right;
              appearance: none;
              -webkit-appearance: none;

              -moz-appearance: none;

              text-indent: 0.01px;

              text-overflow: '';

              width: 70%;

              height: 35px;

              color: #525252;

              line-height: 25px;

          }

          .dark-matter textarea {

              height: 100px;

              padding: 5px 0px 0px 5px;

              width: 70%;

          }

          .dark-matter .button {
              margin: 10px 100px;
              background: #FFCC02;

              border: none;

              padding: 10px 70px 10px 70px;

              color: #585858;

              border-radius: 4px;

              -moz-border-radius: 4px;

              -webkit-border-radius: 4px;

              text-shadow: 1px 1px 1px #FFE477;

              font-weight: bold;

              box-shadow: 1px 1px 1px #3D3D3D;

              -webkit-box-shadow: 1px 1px 1px #3D3D3D;

              -moz-box-shadow: 1px 1px 1px #3D3D3D;

          }

          .dark-matter .button:hover {
              color: #333;
              background-color: #EBEBEB;
          }



          .vedioDiv{
              position: absolute;
              top: 40px;
              left: 250px;
              width: 1000px;
              height: 600px;
              background-color: rgba(0, 0, 0,.3);
              overflow:auto;
          }


          .vedioDiv::-webkit-scrollbar {
              /*滚动条整体样式*/
              width: 10px;
              /*高宽分别对应横竖滚动条的尺寸*/
              height: 1px;
          }

          .vedioDiv::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 10px;
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
              background: #535353;
          }

          .vedioDiv::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              /* background: #EDEDED; */
              background: rgba(0, 0, 0, 0.05);
          }
          .vedioDiv th{
              color:#43b9d5;
          }
          .vedioDiv tbody{
              color:#fff;
          }
      </style>
      <style>

   .container {
       width: 1300px;
       height:1000px


      border: 1px solid WHITE;
       padding: 20px;
       box-sizing: border-box;
      outline: 1px solid WHITE;

       position: relative;
       top: 30px; /* 将 top 属性值设为负数 */
       left: 50px;
       font-family: Arial, sans-serif;
       overflow: hidden;
   }
     </style>


</head>
<body >

<!--模态框，捕捉人脸-->
<div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="photoModalLabel">入侵图片</h4>
            </div>
            <div class="modal-body"  id="photoDiv">
                <img src="#" id="photoImg">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!--侧边伸缩框-->
  <div class="menuToggle"></div>
  <div class="sidebar">
    <ul>
      <li class="logo" style="--bg: #333;">
        <a href="">
            <div class="icon"><img style="width: 80px;" src="../media/back/gas.png" alt="Gas Station Icon"></div>
          <div class="text">智慧加油站</div>
        </a>
      </li>
      <div class="menu-list">
 >
        <li style="--bg:pink;"class="active">
         <a href="{% url 'gly-rt-monitor' %}">
            <div class="icon"><ion-icon name="eye-outline"></ion-icon></div>
            <div class="text">实时监控</div>
          </a>
        </li>

        <li style="--bg:springgreen;">
         <a href="{% url 'record' %}">
            <div class="icon"><ion-icon name="warning-outline"></ion-icon></div>
            <div class="text">查看入侵记录</div>
          </a>
        </li>

        <li style="--bg:#292c39;">
         <a href="{% url 'statistic' %}">
            <div class="icon"><ion-icon name="analytics-outline"></ion-icon></div>
            <div class="text">入侵统计</div>
          </a>
        </li>

{% if status > 0 %}
		<li style="--bg:#ffa117;">
		  <a href="{% url 'infoManager' %}">
		    <div class="icon"><ion-icon name="document-outline"></ion-icon></div>
		    <div class="text">信息管理</div>
		  </a>
		</li>
 {% endif %}
      </div>
	  <div class="bottom">
	    <li style="--bg:#333;">
	      <a href="#">
	        <div class="icon">
	          <div class="imgBx">
	            <img src="../media/video/images/user.jpg" alt="user">
	          </div>
	        </div>
	        <div class="text">manager</div>
	      </a>
	    </li>

	    <li style="--bg:#333;">
	      <a href="{% url 'login'%}">
	        <div class="icon"><ion-icon name="log-out-outline"></ion-icon></div>
	        <div class="text">退出</div>
	      </a>
	    </li>

	  </div>
    </ul>

  </div>

<!-- -->


<div class="container">
  <div id="monitoring-area" class="page">
    <!-- 监控区域内容 -->
         <!-- HTML 代码 -->
  <div class="panel"   style=" background-color: rgba(255, 192, 203, 0.8);height:650px; border: 1px solid white;"  >
      <div class="panel-heading" >
           <h3 class="panel-title" style="  font-size: 24px; /* Increase the font size to 24 pixels */
    text-align: center; /* Center align the text */
    margin: 0;
    color:pink/* Remove any default margins */" ><strong>监控区域</strong></h3>
       </div>
<div class="row" style="">
    <style>
   .photo {
    display: flex;
    align-items: center;
}

.photo-title {
    margin-left: 10px;
    font-size: 18px;
    color:hotpink;
    /* Add more styles as needed */
}
    </style>
<div class="col-md-6" >
    <div class="embed-responsive test video_div"   >
        <div class="photo" >
             <h4 class="photo-title" >加&nbsp;<br>油&nbsp;<br>站&nbsp;<br>入&nbsp;<br>口&nbsp;</h4>
            <img src="/intrusionDect/video" width="470px" height="280px">

        </div>
    </div>
</div>
	                  <div class="col-md-6" >
    <div class="embed-responsive test video_div"  >
        <div class="photo" >
             <h4 class="photo-title" >加&nbsp;<br>油&nbsp;<br>站&nbsp;<br>出&nbsp;<br>口&nbsp;</h4>
            <img src="/intrusionDect/video1" width="470px" height="280px">

        </div>
    </div>
</div>



	                  <div class="col-md-6" >
    <div class="embed-responsive test video_div"   >
        <div class="photo" >
             <h4 class="photo-title" >加&nbsp;<br>油&nbsp;<br>机&nbsp;</h4>
            <img src="/intrusionDect/video2" width="470px" height="280px">

        </div>
    </div>
</div><div class="col-md-6" >
    <div class="embed-responsive test video_div"   >
        <div class="photo" >
             <h4 class="photo-title" >危&nbsp;<br>险&nbsp;<br>区&nbsp;<br>域&nbsp;</h4>
            <img src="/intrusionDect/video3" width="470px" height="280px">

        </div>
    </div>
</div>

  </div>
        <button class="btn btn-primary" style="background-color:pink;float: right; margin-top:30px" id="switch-btn" onclick="switchPage()">选择监控区域</button>

  </div>
      </div>
     <div id="alarm-records" class="page" style="display: none;">

        <div>
<style>
	.nav-tabs a {
	    color: hotpink;
	    /* Add any other desired styles */
	}
</style>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                          data-toggle="tab">加油站入口</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                           data-toggle="tab">加油站出口</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                                           data-toggle="tab">加油机</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
                                           data-toggle="tab">危险区域</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content"STYLE="background-color: rgba(255, 192, 203, 0.5); border: 1px solid white;" >

                <div role="tabpanel" class="tab-pane fade in active" id="home">
                    <form action="{% url 'processSetMonitorArea' %}" method="post" id="form1">
                        {%csrf_token %}
                        <div class="titleDiv">
                            <span style="color: hotpink;;">区域名:</span>
                            <input type="text" id="input1 " class="input_zpc" name="regionName">
                        </div>

                        <div id="wrap1">
                            <div class="resizeBox" id="resizeBox1">
                                <div class="dragBlockWrap">
                                    <div class="dragBlock upDragBlock"></div>
                                    <div class="dragBlock downDragBlock"></div>
                                    <div class="dragBlock leftDragBlock"></div>
                                    <div class="dragBlock rightDragBlock"></div>
                                    <div class="dragBlock leftUpDragBlock"></div>
                                    <div class="dragBlock leftDownDragBlock"></div>
                                    <div class="dragBlock rightUpDragBlock"></div>
                                    <div class="dragBlock rightDownDragBlock"></div>
                                </div>
                                <div class="resizeContent" title="我是什么？我是一个能自由变化大小的小盒子～">
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="butDiv">
                        <button class="btn btn-success butt" id="butt1" onclick="regionForm('摄像头1','form1')" >
                        提交
                        </button>
                    </div>

                </div>

                <div role="tabpanel" class="tab-pane fade" id="profile">
                    <form action="{% url 'processSetMonitorArea' %}" method="post" id="form2">
                        {%csrf_token %}
                        <div class="titleDiv">
                            <span>区域名:</span>
                            <input type="text" id="input2" class="input_zpc " name="regionName">
                        </div>

                        <div id="wrap2">
                            <div class="resizeBox" id="resizeBox2">
                                <div class="dragBlockWrap">
                                    <div class="dragBlock upDragBlock"></div>
                                    <div class="dragBlock downDragBlock"></div>
                                    <div class="dragBlock leftDragBlock"></div>
                                    <div class="dragBlock rightDragBlock"></div>
                                    <div class="dragBlock leftUpDragBlock"></div>
                                    <div class="dragBlock leftDownDragBlock"></div>
                                    <div class="dragBlock rightUpDragBlock"></div>
                                    <div class="dragBlock rightDownDragBlock"></div>
                                </div>
                                <div class="resizeContent" title="我是什么？我是一个能自由变化大小的小盒子～">
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="butDiv">
                        <button class="btn btn-success butt" id="butt2"
                                onclick="regionForm('摄像头2','form2')">提交
                        </button>
                    </div>

                </div>
                <div role="tabpanel" class="tab-pane fade" id="messages">
                    <form action="{% url 'processSetMonitorArea' %}" method="post" id="form3">
                        {%csrf_token %}
                        <div class="titleDiv">
                            <span>区域名:</span>
                            <input type="text" id="input3" class="input_zpc" name="regionName">
                        </div>

                        <div id="wrap3">
                            <div class="resizeBox" id="resizeBox3">
                                <div class="dragBlockWrap">
                                    <div class="dragBlock upDragBlock"></div>
                                    <div class="dragBlock downDragBlock"></div>
                                    <div class="dragBlock leftDragBlock"></div>
                                    <div class="dragBlock rightDragBlock"></div>
                                    <div class="dragBlock leftUpDragBlock"></div>
                                    <div class="dragBlock leftDownDragBlock"></div>
                                    <div class="dragBlock rightUpDragBlock"></div>
                                    <div class="dragBlock rightDownDragBlock"></div>
                                </div>
                                <div class="resizeContent" title="我是什么？我是一个能自由变化大小的小盒子～">
                                </div>
                            </div>
                        </div>

                    </form>
                    <div class="butDiv">
                        <button class="btn btn-success butt" id="butt3"
                                onclick="regionForm('摄像头3','form3')">提交
                        </button>
                    </div>

                </div>
                <div role="tabpanel" class="tab-pane fade" id="settings">
                    <form action="{% url 'processSetMonitorArea' %}" method="post" id="form4">
                        {%csrf_token %}
                        <div class="titleDiv">
                            <span>区域名:</span>
                            <input type="text" id="input4" class="input_zpc" name="regionName">
                        </div>

                        <div id="wrap4">
                            <div class="resizeBox" id="resizeBox4">
                                <div class="dragBlockWrap">
                                    <div class="dragBlock upDragBlock"></div>
                                    <div class="dragBlock downDragBlock"></div>
                                    <div class="dragBlock leftDragBlock"></div>
                                    <div class="dragBlock rightDragBlock"></div>
                                    <div class="dragBlock leftUpDragBlock"></div>
                                    <div class="dragBlock leftDownDragBlock"></div>
                                    <div class="dragBlock rightUpDragBlock"></div>
                                    <div class="dragBlock rightDownDragBlock"></div>
                                </div>
                                <div class="resizeContent">
                                </div>
                            </div>
                        </div>
                    </form>
					<style>
						.btn.btn-success.butt {
						    background-color: pink;
						    /* Add any other desired styles */
						}
					</style>
                    <div class="butDiv" >
                        <button class="btn btn-success butt" id="butt4"
                                onclick="regionForm('摄像头4','form4')">提交
                        </button>
                    </div>
                </div>
            </div>
        </div>


 <button class="btn btn-primary "  style="background-color:pink;float: right
  "id="switch-btn1" onclick="switchPage()">返回监控区域</button>
  </div>
</div>






  <script>
  // 切换页面函数
  function switchPage() {
    var monitoringArea = document.getElementById("monitoring-area");
    var alarmRecords = document.getElementById("alarm-records");

    if (monitoringArea.style.display === "none") {
      // 显示监控区域，隐藏监控记录
      monitoringArea.style.display = "block";
      alarmRecords.style.display = "none";
    } else {
      // 显示监控记录，隐藏监控区域
      monitoringArea.style.display = "none";
      alarmRecords.style.display = "block";
    }
  }
</script>
 <!-- 伸缩栏 -->
  <script src="js/script.js"></script>
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

  <script>
    const menuToggle = document.querySelector('.menuToggle'),
          sidebar = document.querySelector('.sidebar'),
          Menulist = document.querySelectorAll('.menu-list li')
    menuToggle.onclick = function(){
      menuToggle.classList.toggle('active')
      sidebar.classList.toggle('active')
    }

    function activeLink() {
      Menulist.forEach((item) =>
        item.classList.remove('active')
      )
      this.classList.add('active')
    }

    Menulist.forEach((item) =>
      item.addEventListener('click', activeLink)
    )
  </script>







 <!-- monitor -->
  <script>

      function selectFunc() {
          var xhr = new XMLHttpRequest();
          var sel = document.getElementById('selectIdenObj');
          var selValue = sel.options[sel.options.selectedIndex].value;
          console.log(selValue );
          var params = "selValue=" + selValue;
           console.log(params );
          xhr.open('get', '/intrusionDect/selectIdenObj?' + params);
          xhr.send();
      }


        var num={{num|safe}};
        var urls={{images|safe}};
        var tabletrs1=document.querySelectorAll('#recBody tr');
        console.log(tabletrs1);
        for(var i=0; i<num;i++){
             var td=tabletrs1[i].children[5];
             td.innerHTML='<button class="btn btn-info">详情</button>';
             var but=td.children[0];
             but.setAttribute('data-toggle', 'modal');
             but.setAttribute('data-target', '#photoModal');

             but.onclick=function(){
                  var img=document.getElementById('photoImg');
                  var id=this.parentNode.parentNode.children[0].innerHTML;
                  img.setAttribute("src",urls[id-1]);
                  <!-- img.style.src=urls[i];-->
             }
        }

      function mySubmit(formId){
          var form=document.getElementById(formId);
          form.submit();
      }

      let fileInput = document.getElementById('file');
      let info = document.getElementById('info');
      let preview = document.getElementById('image-preview');
      // 监听change事件:
      fileInput.addEventListener('change', function () {
          // 清除背景图片:
          preview.style.backgroundImage = '';
          if (!fileInput.value) {
              info.innerHTML = '没有选择文件';
              return;
          }
          let file = fileInput.files[0];
          let size = file.size;
          if (!['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)) {
              alert('不是有效的图片文件!');
              return;
          }
          // 读取文件:
          let reader = new FileReader();
          reader.onload = function (e) {
              let data = e.target.result;
              console.log(preview, 'a标签')
              preview.src = data
          };
          // 以DataURL的形式读取文件:
          reader.readAsDataURL(file);
      });




      $('.form_datetime').datetimepicker({
          format: 'yyyy-mm-dd hh:ii:ss',
          autoclose: true,
          /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
          language: 'zh-CN',
          dateFormat: 'yyyy-mm-dd',//日期显示格式
          timeFormat: 'HH:mm:ss',//时间显示格式
          todayBtn: 1,
          autoclose: 1,
          minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
          minuteStep: 1//分钟间隔1分钟
      });





      $(document).ready(function () {
          var trigger = $('.hamburger'),
              overlay = $('.overlay'),
              isClosed = false;
          trigger.click(function () {
              hamburger_cross();
          });
          function hamburger_cross() {
              if (isClosed == true) {
                  overlay.hide();
                  trigger.removeClass('is-open');
                  trigger.addClass('is-closed');
                  isClosed = false;
              } else {
                  overlay.show();
                  trigger.removeClass('is-closed');
                  trigger.addClass('is-open');
                  isClosed = true;
              }
          }
          $('[data-toggle="offcanvas"]').click(function () {
              $('#wrapper').toggleClass('toggled');
          });
      });

  <!--      var tbody1 = document.getElementById('recBody');-->
  <!--    {% for rec in records %}-->
  <!--         var tr = document.createElement('tr');-->
  <!--         tbody1.appendChild(tr);-->
  <!--         var td = document.createElement('td');-->
  <!--         tr.appendChild(td);-->
  <!--         td.innerHTML = {{rec.intrusionTime}};-->
  <!--    {% endfor %}-->

  <!--&lt;!&ndash;    for (var i = 0; i < records.length; i++) {&ndash;&gt;-->
  <!--&lt;!&ndash;        var tr = document.createElement('tr');&ndash;&gt;-->
  <!--&lt;!&ndash;        tbody1.appendChild(tr);&ndash;&gt;-->
  <!--&lt;!&ndash;        var td = document.createElement('td');&ndash;&gt;-->
  <!--&lt;!&ndash;        tr.appendChild(td);&ndash;&gt;-->
  <!--&lt;!&ndash;        td.innerHTML = records[i][obj];&ndash;&gt;-->
  <!--&lt;!&ndash;        var td = document.createElement('td');&ndash;&gt;-->
  // <!--&lt;!&ndash;        td.innerHTML = '<a href="javascript:;"  class="btn btn-warning">删除</a>'&ndash;&gt;-->
  // <!--&lt;!&ndash;        tr.appendChild(td);&ndash;&gt;-->
  // <!--&lt;!&ndash;    }&ndash;&gt;-->

      var as = document.querySelectorAll('#record-tablebody1 a');
      for (var i = 0; i < as.length; i++) {
          as[i].onclick = function () {
              tbody.removeChild(this.parentNode.parentNode);
          }
      }



      //查询功能
      var btn = document.getElementById('query-btn')
      btn.onclick = function () {
          queryTable();
      }
      function queryTable() {
          // startTime,endTime
          startTime = document.getElementById('startTime').value;
          endTime = document.getElementById('endTime').value;
          if (!startTime || !endTime) {
              return
          }
          var startDate = new Date(startTime);
          var endDate = new Date(endTime);
          trs = document.querySelectorAll('.recBody tr');
          console.log(trs);
          for (var i = 0; i < trs.length; i++) {
              var recDate = new Date(trs[i].getElementsByTagName("td")[1].innerHTML);


              if (startDate <= recDate && recDate <= endDate) {
                  trs[i].style.display = '';
              } else {
                  trs[i].style.display = 'none';
              }
          }
      }

      var lis = document.querySelectorAll('#camera-ul li');
      for (var i = 0; i < lis.length; i++) {
          lis[i].onclick = function () {
              var text = this.innerText.replace(/\s+/g, "");
              console.log(text);
              var trs = document.querySelectorAll('#recBody tr');
              for (var i = 0; i < trs.length; i++) {
                  var tdText = trs[i].getElementsByTagName("td")[2].innerHTML;
                  console.log(tdText);
                  console.log(tdText == text);
                  if (tdText == text) {
                      trs[i].style.display = '';
                  } else {
                      trs[i].style.display = 'none';
                  }
              }
          }
      }



  </script>
<SCRIPT>// Add your custom submit logic here
            document.getElementById(formId).submit();
        }
    </script>
<script src="/static/js/resize.js" type="text/javascript" charset="utf-8"></script>
<script>

<!--onclick="regionForm('摄像头1','form1')"-->

<!--var butt1=document.getElementById('butt1')-->
<!--butt1.onclick=function(){-->
<!--    regionForm('摄像头1','form1');-->
<!--}-->

    function regionForm(cameraId,formId){
         var form = document.getElementById(formId);
         var input =document.createElement('input');
         input.setAttribute('name','cameraId');
         input.setAttribute('value',cameraId);
         form.append(input);

         var odiv;
         var imageDiv;
        if(cameraId=='摄像头1'){
            imageDiv= document.getElementById('wrap1');
            odiv = document.getElementById('resizeBox1');
        }else if(cameraId=='摄像头2'){
            imageDiv= document.getElementById('wrap2');
            odiv = document.getElementById('resizeBox2');
        }else if(cameraId=='摄像头3'){
            imageDiv= document.getElementById('wrap3');
            odiv = document.getElementById('resizeBox3');
        }else if(cameraId=='摄像头4'){
            imageDiv= document.getElementById('wrap4');
            odiv = document.getElementById('resizeBox4');
        }

        console.log((odiv.getBoundingClientRect().x-imageDiv.getBoundingClientRect().x)/imageDiv.getBoundingClientRect().width);
        console.log((odiv.getBoundingClientRect().y-imageDiv.getBoundingClientRect().y)/imageDiv.getBoundingClientRect().height);
        console.log(odiv.getBoundingClientRect().width/imageDiv.getBoundingClientRect().width);
        console.log(odiv.getBoundingClientRect().height/imageDiv.getBoundingClientRect().height);


         var input_x =document.createElement('input');
         input_x.setAttribute('name','xRatio');
         input_x.setAttribute('value',(odiv.getBoundingClientRect().x-imageDiv.getBoundingClientRect().x)/imageDiv.getBoundingClientRect().width);
         form.append(input_x);

         var input_y =document.createElement('input');
         input_y.setAttribute('name','yRatio');
         input_y.setAttribute('value',(odiv.getBoundingClientRect().y-imageDiv.getBoundingClientRect().y)/imageDiv.getBoundingClientRect().height);
         form.append(input_y);

         var input_width =document.createElement('input');
         input_width.setAttribute('name','wRatio');
         input_width.setAttribute('value',odiv.getBoundingClientRect().width/imageDiv.getBoundingClientRect().width);
         form.append(input_width);

         var input_h =document.createElement('input');
         input_h.setAttribute('name','hRatio');
         input_h.setAttribute('value',odiv.getBoundingClientRect().height/imageDiv.getBoundingClientRect().height);
         form.append(input_h);
         form.submit();
    }

    function mySubmit(formId) {
        var form = document.getElementById(formId);
        form.submit();
    }


    let fileInput = document.getElementById('file');
    let info = document.getElementById('info');
    let preview = document.getElementById('image-preview');
    // 监听change事件:
    fileInput.addEventListener('change', function () {
        // 清除背景图片:
        preview.style.backgroundImage = '';
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        let file = fileInput.files[0];
        let size = file.size;
        if (!['image/jpeg', 'image/png', 'image/gif', 'image/jpg'].includes(file.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        let reader = new FileReader();
        reader.onload = function (e) {
            let data = e.target.result;
            console.log(preview, 'a标签')
            preview.src = data
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    });



    $('.form_datetime').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        autoclose: true,
        /* minView: "month",  *///选择日期后，不会再跳转去选择时分秒
        language: 'zh-CN',
        dateFormat: 'yyyy-mm-dd',//日期显示格式
        timeFormat: 'HH:mm:ss',//时间显示格式
        todayBtn: 1,
        autoclose: 1,
        minView: 0,  //0表示可以选择小时、分钟   1只可以选择小时
        minuteStep: 1//分钟间隔1分钟
    });





    $(document).ready(function () {
        var trigger = $('.hamburger'),
            overlay = $('.overlay'),
            isClosed = false;
        trigger.click(function () {
            hamburger_cross();
        });
        function hamburger_cross() {
            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }
        $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
        });
    });






    //查询功能
<!--    var btn = document.getElementById('query-btn')-->
<!--    btn.onclick = function () {-->
<!--        queryTable();-->
<!--    }-->
<!--    function queryTable() {-->
// <!--        // startTime,endTime-->
<!--        startTime = document.getElementById('startTime').value;-->
<!--        endTime = document.getElementById('endTime').value;-->
<!--        if (!startTime || !endTime) {-->
<!--            return-->
<!--        }-->
<!--        var startDate = new Date(startTime);-->
<!--        var endDate = new Date(endTime);-->
<!--        trs = document.querySelectorAll('.recBody tr');-->
<!--        console.log(trs);-->
<!--        for (var i = 0; i < trs.length; i++) {-->
<!--            var recDate = new Date(trs[i].getElementsByTagName("td")[1].innerHTML);-->


<!--            if (startDate <= recDate && recDate <= endDate) {-->
<!--                trs[i].style.display = '';-->
<!--            } else {-->
<!--                trs[i].style.display = 'none';-->
<!--            }-->
<!--        }-->
<!--    }-->




</script>
</body>
</html>